<template>
  <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
      <!-- 首行 -->
      <tr class="title">
        <td width="50">
          <input type="checkbox" 
          name="" class="choose_all"  
          @change="selectAll"
          :checked="listAll"
          >
          </td>
        <td width="100" class=""><span style="margin-left: -10px;">全选</span></td>
        <td width="400">商品信息</td>
        <td width="150">单价（元）</td>
        <td width="150">数量</td>
        <td width="150">金额（元）</td>
        <td width="80">操作</td>
      </tr>

      <!-- 商品具体信息 -->
      <tr class="row" v-for="item in redarList" :key="item.id">
        <td><input v-model="item.isSelected" type="checkbox" name="" class="choose"></td>
        <td class="tal"><a href="#" class="pic"><img :src="item.img" alt=""></a>
        </td>
        <td class="tal"><a href="#">{{ item.name }}</a></td>
        <td>
          <del class="tdl">{{ item.oldPrice }}</del>
          <br>
          <b class="unit">{{ item.price }}</b>
        </td>
        <td>
          <div class="amount">
            <a href="#" class="Increase" @click="addSum(item.id)">+</a>
            <input type="text" value="1" class="unum" ref="todol" v-model="item.count" >
            <a href="#" class="Reduce" @click="delSum(item.id)">-</a>
          </div>
        </td>
        <td><b class="u-price">{{(item.price * item.count).toFixed(2)}}</b></td>
        <td><a href="#" class="btn-del" @click="delsingle(item.id)">删除</a></td>
      </tr>
      <tr class="count">
        <td colspan="7">
          <div class="jiesuan clearfix">
            <div class="left fl">
              <p v-show="flagAll"><input type="checkbox" name="" class="choose_all" @change="selectAll" > 全选&nbsp;&nbsp;&nbsp;<a href="#" class="del_check" @click="deleteAll">删除选中商品</a></p>
            </div>
            <div class="right fr clearfix">
              <p>商品总计：￥{{(totalPrice).toFixed(2)}}</p>
              <p>活动优惠：-￥{{preferential}}</p>
              <p>已选商品<span class="red t-number"> {{listsum}} </span>件 总价(不含运费、税费)：<span class="red t-price">￥{{totalPrice-preferential}}</span></p>
              <!-- <div><a href="#" class="btn pay">结算</a></div> -->
              <a href="#" class="btn pay fr">结算</a>
            </div>
          </div>
        </td>
      </tr>
    </table>
</template>

<script>
export default {
  name: "MyListTable",
  props: {
    redarList:Array,
    totalPrice:Number,
    preferential:Number,
  },
  data(){
    return {
      flag:true,
      sum:1,
      msg:1,
    }
  },
  methods:{
    selectAll(){
      this.$emit("input",this.flag)
      this.flag = !this.flag
    },
    delsingle(id){
      this.$emit('delsingle',id)
    },
    deleteAll(){
      this.$emit("deleteAll")
    },
    addSum(id){
      this.$emit('addSum',id)
    },
    delSum(id){
      this.$emit('delSum',id)
    },
    inputdd(id){
      this.$nextTick(()=>{
        console.log(this.$refs.todol);
      })
      this.$emit("inputdd",id,this.$refs.todol.value)
    }
  },

  computed:{
    listAll(){
      return this.redarList.every(item=>item.isSelected)
    },
    flagAll(){
      return this.redarList.length
    },
    listsum(){
      return this.redarList.filter(item => item.isSelected).length
    },
    
  },
  
};
</script>

<style scoped lang="less"></style>
